extends ../_layout

block active
  - sidebar_active = 'dropdown-animations.html'

block content
  mixin build-anim-panel(animation)
    // START box placeholder
    .box-placeholder
      // START button group
      .btn-group
        button.btn.btn-default(data-toggle="dropdown")
          = animation
          |  
          b.caret
        ul.dropdown-menu(role='menu', class="animated #{animation}")
          li
            a(href='#') Action
          li
            a(href='#') Another action
          li
            a(href='#') Something else here
          li
            a(href='#') Separated link
      // END button group
    // END box placeholder

  h3 Dropdown Animations
    small Extends the dropdown effects when open just adding an animation class

  - var animations = ['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','flip','flipInX','flipInY','lightSpeedIn','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','hinge','rollIn','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp']
  // START row
  .row
    - each val in animations
      .col-md-3
        +build-anim-panel(val)
  // END row

  //- bottom space for latest dropdowns
  br
  br
  br
  br
  br


